<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<!-- id:标识元素的唯一性
width: 画布的宽度
height：画布的高度 -->
<body>
    <canvas id="canvas" width="600" height="500">
      
    </canvas>

<script>
  // 1. 找到画布
  var c1 = document.getElementById("canvas");
  // ====== LOG START ======
  console.log('\n');
  console.group('Log');
  console.log(c1);
  console.groupEnd();
  console.log('\n');
  // ====== LOG END ======
  
  // 判断是否有getContext
  if(!c1.getContext) {
    console.log('当前浏览器不支持Canvas!')
  }
  // 2. 获取画笔，上下文对象
  var ctx = c1.getContext("2d");
  console.log("画笔obj: ",ctx)

  // 绘制图像
  // 1. 绘制矩形 fillRect(x, y, 宽度, 高度)
  // ctx.fillRect(100, 200, 300, 300)

  // 2. 路径绘制矩形
  ctx.strokeRect(100, 200, 200, 200);
  // 3. 清除矩形里面的图案
  // ctx.clearRect(0, 0, c1.clientWidth, c1.clientHeight);
  let height = 0
  // 渐进式清除
  let t1 = setInterval(() => {
    height++;
    ctx.clearRect(0, 0, c1.clientWidth, height);
    if(height > c1.clientHeight) {
      clearInterval(t1)
    }
  }, 10)

  //  ==== 分开写法 ====
  // 画笔开始
  ctx.beginPath();
  ctx.rect(150, 150, 200, 200)
  ctx.stroke() // 描边
  // 画笔结束
  ctx.closePath();
  ctx.beginPath();
  ctx.rect(200, 200, 140, 140)
  ctx.closePath();
  ctx.fill(); // 填充

  
</script>
</body>
</html>